<template>
  <div class="bg-settings">
    <el-form
      :model="financeDataForm"
      ref="financeDataForm"
      :rules="rules"
      label-width="200px"
      class="demo-ruleForm"
      status-icon>
      <!--银行开户名-->
      <el-form-item label="银行开户名" prop="bank_account_name">
        <el-input v-model="financeDataForm.bank_account_name" placeholder="请填写银行开户名"></el-input>
      </el-form-item>
      <!--银行账号-->
      <el-form-item label="银行账号" prop="bank_number">
        <el-input v-model="financeDataForm.bank_number" placeholder="请填写银行账号"></el-input>
      </el-form-item>
      <!--开户银行支行名称-->
      <el-form-item label="开户银行支行名称" prop="bank_name">
        <el-input v-model="financeDataForm.bank_name" placeholder="请填写银行支行名称"></el-input>
      </el-form-item>
      <!--开户银行所在地-->
      <el-form-item label="开户银行所在地" prop="bank_region">
        <en-region-picker :api="MixinRegionApi" :default="defaultRegionBank" @changed="(object) => { financeDataForm.bank_region = object.last_id }"></en-region-picker>
      </el-form-item>
      <!--开户银行许可证-->
      <el-form-item label="开户银行许可证" prop="bank_img">
        <el-upload
          class="img-upload"
          :action="MixinUploadApi"
          :on-success="(res) => { uploadShow('bank_img', res)}"
          :on-remove="() => { uploadRemove('bank_img')}"
          :file-list="bank_img_fileList"
          ref="bank_img_fileList"
          list-type="picture-card"
          :limit="1">
          <div v-if="!financeDataForm.bank_img || !bank_img_fileList.length" class="img_none">
            <i class="el-icon-upload2"></i>
            <div class="upload-tip">上传图片</div>
          </div>
        </el-upload>
      </el-form-item>
      <!--税务登记号-->
      <el-form-item label="税务登记号" prop="taxes_certificate_num">
        <el-input v-model="financeDataForm.taxes_certificate_num" placeholder="请填写税务登记号" :maxlength="50"></el-input>
      </el-form-item>
      <!--纳税人识别号-->
      <el-form-item label="纳税人识别号" prop="taxes_distinguish_num">
        <el-input v-model="financeDataForm.taxes_distinguish_num"  placeholder="请填写纳税人识别号" :maxlength="50"></el-input>
      </el-form-item>
      <!--税务登记证-->
      <el-form-item label="税务登记证" prop="taxes_certificate_img">
        <el-upload
          class="img-upload"
          :action="MixinUploadApi"
          :on-success="(res) => { uploadShow('taxes_certificate_img', res)}"
          :on-remove="() => { uploadRemove('taxes_certificate_img')}"
          :file-list="taxes_certificate_img_fileList"
          ref="taxes_certificate_img_fileList"
          list-type="picture-card"
          :limit="1">
          <div v-if="!financeDataForm.taxes_certificate_img || !taxes_certificate_img_fileList.length" class="img_none">
            <i class="el-icon-upload2"></i>
            <div class="upload-tip">上传图片</div>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSaveFinanceData('financeDataForm')">提 交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { RegExp } from '../../../ui-utils'
  import * as API_Shop from '@/api/shop'
  export default {
    name: 'financeSettings',
    data() {
      const req_rule = (message, trigger) => ({ required: true, message, trigger: trigger || 'blur' })
      return {
        /** 财务信息 */
        financeDataForm: {
          /** 银行开户名 */
          bank_account_name: '',

          /** 银行账号 */
          bank_number: '',

          /** 开户银行支行名称 */
          bank_name: '',

          /** 开户银行所在地 */
          shop_region: '',

          /** 开户银行许可证 */
          bank_img: '',

          /** 税务登记号 */
          taxes_certificate_num: '',

          /** 税务登记证 */
          taxes_certificate_img: ''
        },

        /** 地区信息 */
        defaultRegionBank: [],

        /** 开户银行许可证 */
        bank_img_fileList: [],

        /** 税务登记证 */
        taxes_certificate_img_fileList: [],

        /** 校验规则 校验必填 */
        rules: {
          bank_account_name: [req_rule('请输入银行开户名！')],
          bank_number: [req_rule('请输入公司银行账号！')],
          bank_name: [req_rule('请输入开户银行支行名称！')],
          bank_region: [req_rule('请选择开户银行所在地！')],
          bank_img: [req_rule('请上传开户银行许可证！')],
          taxes_distinguish_num: [
            req_rule('请输入纳税人识别号！'),
            {
              validator: (rule, value, callback) => {
                if (!RegExp.TINumber.test(value)) {
                  callback(new Error('纳税人识别号格式有误！'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ],
          taxes_certificate_img: [req_rule('请选择税务登记证！')]
        }
      }
    },
    methods: {
      /*
        * @date 2020-03-04
        * @author wolfMan
        * @description {图片上传成功}
      */
      uploadShow(name, res) {
        this[`${name}_fileList`].shift()
        this[`${name}_fileList`].push(res)
        this.financeDataForm[name] = res.url
      },
      /*
        * @date 2020-03-04
        * @author wolfMan
        * @description {图片移除}
      */
      uploadRemove(name) {
        this.financeDataForm[name] = ''
        this.$forceUpdate()
      },
      /** 保存店铺设置*/
      handleSaveFinanceData(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const _params = JSON.parse(JSON.stringify(this.financeDataForm))
            API_Shop.submitFinance(_params).then(() => {
              this.$message.success('财务信息提交成功')
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  .bg-settings {
    background: #fff;
    border: 1px solid #FAFAFA;
    margin: 15px;
    padding: 10px;
    .el-input {
      width: 320px;
    }
    /deep/ .img-upload {
      .el-upload--picture-card {
        padding: 0;
        width: auto;
        height: auto;
        border: none;
      }
      .el-upload-list__item,
      .img_none {
        position: relative;
        padding: 0;
        margin: 0 10px 0 0;
        width: 100px;
        height: 100px;
        line-height: 0;
        border: dashed 1px #E6E6E6;
        border-radius: 2px;
        text-align: center;
        overflow: hidden;
        box-sizing: border-box;
        background: #F8FAFF;
        color: #999;
      }
      .img_none {
        padding: 15px;
        .el-icon-upload2 {
          font-size: 42px;
        }
        .upload-tip {
          line-height: 20px;
        }
      }
    }
    .is-error {
      .img_none {
        border-color: #F56C6C;
      }
    }
    /deep/ .app-address {
      width: 320px!important;
      height: 32px;
      .app-address-title {
        padding: 0 20px 0 15px;
        height: 32px;
        line-height: 32px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
      }
    }
  }
</style>
